<template>
    <uni-card class="order" >
        <view slot="title">
            <view class="order-header">
                <view class="ordersn">
                {{item.order_sn}}
                    <template v-if="item.typec == 1">
                        (正单订单)
                    </template>
                    <template v-else-if="item.typec == 2">
                        (补单订单)
                    </template>
                    <template v-else-if="item.typec == 3">
                        (维修订单)
                    </template>
                </view>
                <view class="timer">
                    <uni-icons custom-prefix="iconfont" type="icon-shizhong" size="20"></uni-icons>
                    {{item.update_time}}
                </view>
            </view>
            
        </view>
        <view class="content">
            <view class="goods_name justify-between">
                <view class="title">{{item.project_name}}</view>
                <template v-if="item.is_edit">
                    <view class="status_name status_0">
                        {{item.status_name}}
                    </view>
                </template>
                <view  v-else class="status_name" :class="'status_'+item.status">{{item.status_name}}</view>
            </view>
            <view class="skulist">
                <view><uni-icons class="icon" type="person-filled" size="20"></uni-icons>&nbsp; {{item.username}}</view>
                <view v-if="item.phone" @click="callphone(item.phone)"><uni-icons class="icon" type="phone-filled" size="20"></uni-icons>&nbsp;  {{item.phone}} <text style="color: #409EFF;margin-left: 20rpx;">拨打</text> </view>    
                <view><uni-icons class="icon" type="location-filled" size="20"></uni-icons>&nbsp;
                <text v-if="role_id == 12 && item.shop_name">{{item.shop_name}}-</text>
                {{item.address}}
                </view>
                <view><uni-icons class="icon" type="calendar" size="20"></uni-icons>&nbsp;工期：{{item.be_endtime}}</view>
                <view v-if="role_id!=12"><uni-icons class="icon" type="flag-filled" size="20"></uni-icons>&nbsp;进度：{{item.total_progress}}%</view>
              
            </view>
        </view>
        <view slot="actions" class="justify-between footers">
            <view class="user">
                <view class="headimg">
                    <image :src="item.client.headimg" v-if="item.client.headimg" mode="widthFix"></image>
                    <image src="@/static/logo.png" v-else mode="widthFix"></image>
                </view>
                <view class="nickname">{{item.client.username}}</view>
            </view>
            <view class="action justify-around">
                <!--  -->
                <button type="default" v-if="item.is_edit && item.is_project == 1" size="mini" @click="xiugai(item.id)">修改</button>
                <button type="primary" size="mini" @click="xiangqing(item)">详情</button>
            
            </view>
        </view>
    </uni-card>
              
</template>

<script>
export default{
    props:{
        item:{
            type:Object,
            default:{}
        },
        role_id:{
            type:Number,
            default:2
        }
    },
    methods:{
        xiugai(id){
            this.$navto(`/pages/yuangong/orderadd?oid=${id}`)
        },
        xiangqing(item){
            
            if(item.is_project == 1){
                this.$navto(`/pages/project/index?oid=${item.id}`)
            }else{
                this.$navto(`/pages/yuangong/orderdetails?oid=${item.id}`)
            }
        },
        delorder(id,index){
            this.$emit('delorder',id,index)
          
            
        },
        callphone(phone){
            uni.makePhoneCall({
            	phoneNumber: phone //仅为示例
            });
        },
    }
}
</script>

<style lang="less" scoped>
    .icon{
        margin-right: 10rpx;
    }
    .phone{
        color: #2979ff;
    }
    .order{
        .order-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            .ordersn{
                color: #000;
                font-weight: 600;
                font-size: 24rpx;
            }
            .timer{
                font-size: 26rpx;
                color: #3a3a3a;
                display: flex;
                align-items: center;
            }
        }
        .content{
            .goods_name{
                min-height: 60rpx;
                .title{
                    font-weight: bold;
                    width: 80%;
                }
                .status_name{
                    
                }
            }
        }
        .footers{
            height: 80rpx;
           .user{
               display: flex;
               align-items: center;
              .headimg{
                  width: 60rpx;
                  height: 60rpx;
                  margin-right: 10rpx;
                  image{
                      width: 60rpx;
                      height: 60rpx;
                      border-radius: 50%;
                  }
              } 
           }
            .action{
                align-items: center;
                button{
                    height: 60rpx;
                    margin: 0 10rpx;
                }
            } 
        }
    
    }
    .nav-item{
        font-size: 26rpx;
    }
</style>